<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8" />
    <title>forget</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/proList.css" />
    <link rel="stylesheet" type="text/css" href="/css/forget.css" />
    <link rel="stylesheet" type="text/css" href="/css/sweetalert.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<body>
<!----------------------------------------order------------------>
<div class="order cart">
    <!-----------------logo------------------->
    <div class="forCon">
        <p>安全设置-找回密码</p>
        <ul>
            <li class="on"><span>01/</span>输入登录名</li>
            <li><span>02/</span>验证信息</li>
            <li><span>03/</span>重置密码</li>
        </ul>
        <div class="formCon">
            <!--步骤1-->
            <form  method="post" class="one layui-form" id="forget1">
                <input type="text" value="" placeholder="邮箱" id="forgetemail" name="email" lay-verify="required|email"><label>请输入邮箱</label><br />
                <input type="submit" value="下一步" class="next"  lay-submit lay-filter="forget1" style="width:120px;color: #fff;background: #ddd;cursor: pointer;">
            </form>
            <!--步骤2-->
            <form  method="post" class="two layui-form" id="forget2">
                <p>电子邮箱：<span id="forgetechoemail"></span></p>
                <p class="tip">验证邮件已发往你的电子邮箱，请输入验证码</p>
                <input type="text" id="forgetcode" name="code" lay-verify="required">
                <input type="submit" value="下一步"  lay-submit lay-filter="forget2" class="next1" style="width: 120px;color: #fff;background: #ddd;cursor: pointer;">
            </form>
            <!--步骤3-->
            <form  method="post" class="three layui-form" id="forget3">
                <label>新密码：</label><input type="password" name="password" id="forgetpassword" lay-verify="required|password"><br />
                <label>确认密码：</label><input type="password" name="repassword" id="forgetrepassword" lay-verify="required|repassword"><br />
                <input type="hidden" id="bz3email" name="email">
                <input type="hidden" id="bz3name" name="username">
                <input type="submit" value="修改密码" id="next3" lay-submit lay-filter="forget3" style="width: 120px;color: #fff;background: #ddd;cursor: pointer;">
            </form>
        </div>
    </div>
</div>

<script src="/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/sweetalert.min.js" type="text/javascript"></script>
<script>
    layui.use(['laydate', 'form','table'],function() {
        let form=layui.form;
        form.verify({

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            password: [
                /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,12}$/
                ,'密码必须6到12位，必须包含字母和数字'
            ],
            repassword : function (value,item) {
                if (value != $("#forgetpassword").val()){
                    return "两次密码不一致";
                }
            }
        });
    });
    $("#forget1").submit(function () {
        $.post("user/forget1",{"email":$("#forgetemail").val()},function (data) {
            if (data.code===200){
                //发送验证码邮件
                layer.msg('邮件发送中，请稍后', {
                    icon: 16
                    ,shade:  [0.8, '#393D49']
                });
                $.get("user/sendEmail",{"email":$("#forgetemail").val()},function (data) {
                    if (data.code===200){
                        layer.closeAll('loading'); //关闭加载层
                        $(".two").show();
                        $(".one").hide();
                        $(".forCon ul li").eq(1).addClass("on").siblings("li").removeClass("on");
                        layer.msg("邮件发送成功",{time:2000,offset: '100px',icon:1});
                    } else{
                        layer.closeAll('loading'); //关闭加载层
                        layer.msg(data.message,{offset: '100px',icon:2});
                    }
                })
            } else{
                layer.msg(data.message,{offset: '100px',icon:2});
            }
        });
        return false;
    });
    $("#forget2").submit(function () {
        let code=$("#forgetcode").val();
        $.post("user/verifyCode",{"code":code},function (data) {
            if (data.code===200){
                $(".three").show();
                $(".two").hide();
                $(".forCon ul li").eq(2).addClass("on").siblings("li").removeClass("on");
                layer.msg("验证码正确",{time:2000,offset: '100px',icon:1});
            } else{
                layer.msg(data.message,{offset: '100px',icon:2});
            }
        });
        return false;
    });

    $("#forget3").submit(function () {
        $.ajax({
            type:'post',
            url:'/user/repassword',
            data:{"email":$("#forgetemail").val(),"password":$("#forgetpassword").val()},
            dataType: "json",
            success:function (data) {
                if(data.code===200){
                    location.href="/logout";
                }else{
                    layer.msg(data.message,{offset: '100px',icon:2});
                }
            }
        });
        return false;
    });
</script>
</body>
</html>
